{% extends 'base.html' %}
{% block style %}
    <link rel="stylesheet" href="../static/layui/css/layui.css"/>
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/layui/layui.js"></script>
    <style>
        /*表格*/
        .table {
            width: 1200px;
            margin: 0 auto;
            padding-top: 40px;
        }

        .table tr {
            height: 40px;
            align-items: center;
            font-size: 14px;
            font-family: Microsoft YaHei;
            line-height: 40px;
        }

        .table tr td {
            padding: 0 !important;
        }

        .layui-table-tool {
            background-color: white;
            font-size: 16px;
            font-family: Microsoft YaHei;
        }

        .table tr:nth-child(even) {
            background: #FAFAFA;
        }

        .layui-laypage-curr em {
            background-color: #CDE1FF !important;
            color: #2671EE !important;
        }

        /*用户信息表单*/
        #userInfo {
            width: 90%;
            margin: 0 auto;
            margin-top: 40px;
        }

        #userInfo .layui-form-item {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        #userInfo .layui-form-label {
            display: inline-block;
            padding-left: 0;
            padding-right: 0;
            text-align: left;
            width: 20%;
        }

        #userInfo .layui-input-block {
            display: inline-block;
            margin-left: 0;
            width: 75%;
        }

        #userInfo .btn {
            width: 100%;
        }

        #userInfo .btn .layui-input-block {
            width: 100%;
            margin: 0;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        #userInfo .btn .layui-input-block .layui-btn {
            background-color: #1E9FFF;
        }

        {#下拉列表#}
        dd.layui-this {
            background-color: #1E9FFF !important;

        }

        {#头部工具#}
        .layui-table-tool {
            width: 100%;
            display: flex;
            flex-direction: row;
        }

        .layui-table-tool .layui-table-tool-temp {
            width: 100%;
            padding-right: 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        {#行内工具#}
        #operateBtn {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            width: 90%;
            margin: 0 auto;
            height: 100%;
        }

        #operateBtn a:hover {
            color: #2671EE;
        }

        #operateBtn div {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        #operateBtn div img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }

        #operateBtn div li {
            width: 20px;
            height: 20px;
            margin-right: 5px;
            color: #2671EE;
        }

        .layui-icon-set-sm:before {
            content: "\e620";
            text-align: center;
            position: absolute;
            display: block;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        #operateBtn div .text {
            font-size: 14px;
            font-weight: 400;
            color: #009688;
            background: none;
            padding-right: 0;
        !important;
            padding-left: 0;
        !important;
        }

        {#赋权表单#}
        #userCount {
            display: flex;
            width: 220px;
            height: 150px;
            flex-direction: column;
            justify-content: space-around;
            align-content: center;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%); /*自己的50% */

        }

        #userCount div {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-content: center;
        }

        #userCount div:nth-child(2) {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-content: center;
        }

        #userCount .userCountValue {
            height: 36px;
            width: 80px;
            font-size: 16px;
            line-height: 36px;
            font-family: Microsoft YaHei;
            color: #666;
            text-align: center;
        }

        #userCount .userCountBtn {
            height: 40px;
            width: 50px;
            border-color: #1E9FFF;
            background-color: #1E9FFF;
            font-size: 25px;
            line-height: 40px;
            font-family: Microsoft YaHei;
            color: #FFFFFF;
            padding: 0;
        }

        #userCount #ok {
            font-size: 14px;
            border-radius: 2px;
            border-color: #1E9FFF;
            background-color: #1E9FFF
        }

        #userCount #cancel {
            font-size: 14px;
            border-radius: 2px;
            border-color: #1E9FFF;
            background-color: #1E9FFF
        }

        #title {
            margin-top: -35px;
        }

        {#删除用户#}
        .layui-layer-btn {
            text-align: center !important;
        }
    </style>

{% endblock %}

{% block content %}
    <div class="children-body">

        <div class="table">
            <table id="userTable" lay-size="sm" lay-filter="userTable"></table>
        </div>
    </div>
    <!--新增用户表单-->
    <div id="userInfo" style="display: none">
        <form class="layui-form" method="post" lay-filter="userInfo" id="userForm">
            <div class="layui-form-item" style="display: none">
                <div class="layui-input-block">
                    <input id="id" type="hidden" lay-verify="id" name="id" placeholder="请输入用户id" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp名:</label>
                <div class="layui-input-block">
                    <input id="username" type="text" lay-verify="username" name="username" placeholder="请输入姓名"
                           autocomplete="off"
                           class="layui-input"
                           lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item" id="passwordContainer">
                <label class="layui-form-label">密&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp码:</label>
                <div class="layui-input-block">
                    <input id="password" type="password" lay-verify="password" name="password" placeholder="请输入密码"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp机:</label>
                <div class="layui-input-block">
                    <input id="phone" type="text" lay-verify="phone" name="phone" placeholder="请输入手机号"
                           autocomplete="off"
                           class="layui-input"
                           lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item" style="display: none">
                <label class="layui-form-label">角&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp色:</label>
                <div class="layui-input-block">
                    <input id="role" type="text" lay-verify="role" name="role" placeholder="请输入手机号"
                           autocomplete="off"
                           class="layui-input"
                           lay-verify="required" value="1">
                </div>
            </div>
            <div class="layui-form-item btn">
                <div class="layui-input-block">
                    <button id="submitBtn" class="layui-btn" lay-submit lay-filter="add">确定</button>
                    <button id="cancelBtn" class="layui-btn" lay-submit lay-filter="cancel">取消</button>
                </div>
            </div>
        </form>
    </div>

{% endblock %}
{% block script %}
    <script>
        {#var csrftoken = "{{csrf_token()}}"#}
        layui.use(['element', 'table', 'layer', 'form'], function () {
            let element = layui.element;
            let table = layui.table;
            let form = layui.form;
            let userInfoLayer = null;
            //渲染表格
            let userTable = table.render(
                {
                    elem: "#userTable",
                    page: true,
                    limit: 5,
                    limits: [5, 10],
                    url: '/user/get_users',
                    {#headers: {"X-CSRFToken": csrftoken},#}
                    method: 'GET',
                    where: {'position': 1},

                    cols: [[
                        {field: 'id', title: 'ID', align: 'center', width: '10%', fixed: 'left'},
                        {field: 'name', title: '姓名', align: 'center', width: '15%', fixed: 'left'},
                        {field: 'password', title: '密码', align: 'center', width: '20%', fixed: 'left'},
                        {field: 'phone', title: '手机', align: 'center', width: '25%', fixed: 'left'},
                        {field: 'create_time', title: '创建时间', align: 'center', width: '25%', fixed: 'left'},
                        {
                            field: 'operate',
                            title: '操作',
                            align: 'center',
                            width: '25%',
                            fixed: 'left',
                            toolbar: '#operate'
                        },
                    ]],
                    toolbar: '#toolbar',
                    defaultToolbar: [],
                    //表格渲染完执行
                    done: function (res, curr, count) {
                        $("[data-field='password']").css('display', 'none'); //隐藏密码
                        $("[data-field='count']").css('display', 'none'); //隐藏密码
                        //回车搜索
                        $('#keyword').bind('keyup', function (event) {
                            if (event.keyCode == '13') {
                                searchUser()
                            }
                        })
                    }
                },
            )
            // 监听行操作
            table.on('tool(userTable)', function (obj) {
                let user = obj.data
                var role_id ={{ role }}
                var user_id ={{ user_id }}
             
                //修改操作
                if (role_id == 3 || user_id == user.id) {
                    if (obj.event == "edit") {
                        editUser(user)
                    }
                    //删除操作
                    else if (obj.event == "del") {
                        console.log(user)
                        delUser(user)
                    }
                } else {
                    layer.msg('没有权限！',{icon:7})
                }
            })
            //监听头部工具--新增用户
            table.on('toolbar(userTable)', function (obj) {
                //新增
                if (obj.event == 'add') {
                    addUser()
                }
                //搜索
                else if (obj.event == 'search') {
                    searchUser();
                }
            })

            //表单验证
            form.verify({
                username: [/^[\S]{2,12}$/, '用户名长度必须3到12位，且不能出现空格'],
                phone: function (value, item) {
                    if (value.trim().length > 0) {
                        var rule = /^1\d{10}$/;
                        if (!rule.test(value)) {
                            return '手机号码必须11位数字！'
                        }
                    }
                }
            })

            //搜索
            function searchUser() {
                let keyword = $('#keyword').val().trim()
                userTable.reload({
                    method: 'GET',
                    where: {
                        'name': keyword,
                        'position': 1
                    },
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                })
                $('#keyword').val(keyword)
            }

            //新增
            function addUser() {
                //清空表单
                $('#userForm')[0].reset()
                form.render()
                userInfoLayer = layer.open({
                    title: '新增用户',
                    type: 1,
                    shade: 0,
                    area: ['380px', '450px'], //宽高
                    content: $('#userInfo'),  //调到新增页面
                     end:function (){
                        $('#userInfo').css('display', 'none')
                    },
                    success: function () {
                        $('#passwordContainer').show()
                        $("#submitBtn").attr("lay-filter", "add")
                    }
                });
                form.on('submit(add)', function (obj) {
                    obj.position = 1
                    $.ajax({
                        url: '/user/register',
                        method: 'post',
                        {#headers: {"X-CSRFToken": csrftoken},#}
                        data: obj.field,
                        dataType: 'JSON',
                        success: function (res) {
                            $('#userInfo').css('display', 'none')
                            layer.close(userInfoLayer)
                            layer.msg('新增用户成功！');
                            userTable.reload()
                        },
                        error: function (res) {
                            layer.msg('新增用户失败！');
                        }
                    });
                    //阻止表单跳转
                    return false;
                });
                $('#cancelBtn').unbind('click').click(function () {
                    layer.close(userInfoLayer)
                    $('#userInfo').css('display', 'none')

                    return false
                })
            }

            //修改
            function editUser(user) {
                let userInfoLayer = layer.open({
                    title: '修改用户信息',
                    type: 1,
                    shade: 0,
                    area: ['380px', '400px'], //宽高
                    content: $('#userInfo'),  //调到新增页面
                     end:function (){
                        $('#userInfo').css('display', 'none')
                    },
                    success: function () {
                        $('#passwordContainer').hide()
                        $("#submitBtn").attr("lay-filter", "edit")
                    }
                });
                $("#id").val(user.id)
                $("#username").val(user.name)
                $("#password").val(user.password)
                $("#phone").val(user.phone)
                $("#roles").val(user.role)
                form.on('submit(edit)', function (obj) {
                    let user = obj.field
                    $.ajax({
                        url: '/user/edit_user',
                        method: 'post',
                        {#headers: {"X-CSRFToken": csrftoken},#}
                        data: user,
                        dataType: 'JSON',
                        success: function (res) {
                            //关闭弹出层
                            $('#userInfo').css('display', 'none')
                            layer.close(userInfoLayer)
                            layer.msg('修改成功', {icon: 6});
                            userTable.reload()
                        },
                        error: function (res) {
                            layer.msg('修改失败！', {icon: 5});
                        }
                    });
                    return false
                })
                $('#cancelBtn').unbind('click').click(function () {
                    layer.close(userInfoLayer)
                    $('#userInfo').css('display', 'none')
                    return false
                })
            }

            //删除
            function delUser(user) {
                layer.open({
                    title: '删除',
                    btn: ['确定', '取消'],
                    shade: 0,
                    content: '确定要删除吗？',
                    yes: function (index) {
                        $.ajax({
                            url: '/user/del_user',
                            method: 'post',
                            {#headers: {"X-CSRFToken": csrftoken},#}
                            data: user,
                            dataType: 'JSON',
                            success: function (res) {
                                //关闭弹出层

                                layer.msg("删除成功", {icon: 6});
                                userTable.reload()

                            },
                            error: function (res) {
                                layer.msg('=删除失败！', {icon: 5});
                            }
                        });
                    }
                })
            }
        });
    </script>
    <script type="text/html" id="operate">
        <div id="operateBtn">
            <div>
                <a class="layui-btn text " lay-event="edit">修改</a>
            </div>
            <div>
                <a class="text layui-btn " lay-event="del">删除</a>
            </div>
        </div>
    </script>
    <script type="text/html" id="toolbar">
        <div id="search">
            <div class="layui-inline">
                <input id="keyword" class="layui-input" autocomplete="off" placeholder="请输入姓名" style="font-size: 16px">
            </div>
            <button class="layui-btn" data-type="reload" style="font-size: 16px"
                    lay-event="search">
                搜索
            </button>
        </div>
        <div id="addUser">
            <a class="layui-btn" style="font-size: 16px;background-color: rgba(28, 119, 180,0.8)" lay-event="add">
                <span style="padding-left: 5px">新增用户</span>
            </a>
        </div>
    </script>
{% endblock %}
